<template>
  <div class="">
    <div class="cardDiv3" >
      <div class="infoPublic">
        <div class="infoTop">
          <div class="infoPublicImg"><img   src="@/assets/icon_ball.png"/></div>
          <div class="infoPublicText">从业单位</div>
          <div class="more" @click="toWorkingUnit">更多&nbsp;> </div>
        </div>
        <div style="height:2px;width:100%;border-top:1px solid #ccc;float:left;margin-top:10px;"></div>
        <div style="margin-top:25px;">
          <div class="nav-div">
            <a-menu mode="vertical" theme="dark"  :selectedKeys="[mouseoverSelect]" @click="onLeftMenuClick"  >
                <a-menu-item v-for="item in menuData" :key="item.key" @mouseover="onMouseoverMenu(item.key)">
                 <span class="nav-item-text" > {{ item.name }}</span>

                </a-menu-item>
              </a-menu>
            </div>
            <!-- <div v-for="(item,index) in sjShows" :key="index">
              <div v-show="item.sjShow" :class="['triangle-right','triangle-margin-top'+index]"></div>
            </div>  -->

            <div class="nav-select-div">
              <a-table :columns="companyColumnsData" :data-source="companyData" rowKey="id" :pagination="false" :customRow="onUnitDetail">
                <template slot="xh" slot-scope="text, record, index">
                  {{index + 1 }}
                </template>

                <template slot="typeDw" slot-scope="text">
                  <span>{{ dictText('单位类别',text) }}</span>
                </template>

              </a-table>
            </div>
        </div>
      </div>
      <div class="statisticalData">
        <div class="infoTop">
          <div class="infoPublicImg"><img style="width:19px;height:20px;" src="@/assets/icon_1.png"/></div>
          <div class="infoPublicText">从业人员信息</div>
          <div class="more" @click="toWorkingPerson">更多&nbsp;> </div>
        </div>
        <div style="height:2px;width:100%;border-top:1px solid #ccc;float:left;margin-top:10px;margin-bottom:18px;"></div>
        <div>
          <template v-for="(item,index) in personInfoData">
            <div :key="index" class="person-list" @click="toPersonDetail(item)" >
              <div style="margin-bottom:13px;">
                <span class="person-name">{{item.name}}</span>
                <span class="person-position">{{item.zhiwu}}</span>
              </div>
              <span class="person-company">{{item.zcdw}}</span>
            </div>

          </template>
          <a-empty :image="simpleImage" v-if="personInfoData.length==0" />
        </div>
      </div>



    </div>



  </div>

</template>

<script>
import { Empty } from 'ant-design-vue';
import api from '@/api/index'
  export default {
    name: "item3",
    beforeCreate() {
      this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
    },
    data() {
      return {
        mouseoverSelect:1,
        sjShow1 : true,
        sjShow2 : false,
        sjShow3 : false,
        sjShow4 : false,
        sjShow5 : false,
        sjShow6 : false,
        sjShows:[{key:1,sjShow:true},{key:2,sjShow:false},{key:3,sjShow:false},{key:4,sjShow:false},{key:5,sjShow:false},{key:6,sjShow:false}],
        companyColumnsData:[
            {
              title: '序号',
              dataIndex: 'xh',
              key: 'xh',
              width:60,
              scopedSlots: { customRender: "xh" }
            },
            {
              title: '企业名称',
              dataIndex: 'nameDwzw',
              key: 'nameDwzw',
              ellipsis: true,
              scopedSlots: { customRender: "nameDwzw" }
            },
            {
              title: '单位类别',
              dataIndex: 'typeDw',
              key: 'typeDw',
              ellipsis: true,
              scopedSlots: { customRender: "typeDw" }
            },
            {
              title: '法人代表',
              dataIndex: 'representFr',
              key: 'representFr',
              ellipsis: true,
              scopedSlots: { customRender: "representFr" }
            },
            {
              title: '发布时间',
              dataIndex: 'createDate',
              key: 'createDate',
              ellipsis: true,
              scopedSlots: { customRender: "createDate" }
            },
          ],
        companyData:[],
        companyPageFilter: {
          typeDw:'设计',
          pageNo: 1,
          pageSize: 9,
          isPass:true,
        },
        personInfoData:[
            // {
            //   name:'任维国',
            //   zhiwu:'项目经理',
            //   zcdw:'海南灌排技术开发有限公司',
            // },
            // {
            //   name:'任维国',
            //   zhiwu:'产品经理',
            //   zcdw:'海南灌排技术开发有限公司',
            // },
            // {
            //   name:'任维国',
            //   zhiwu:'软件工程师',
            //   zcdw:'海南灌排技术开发有限公司',
            // },
            // {
            //   name:'任维国',
            //   zhiwu:'项目经理',
            //   zcdw:'海南省水利水电勘测设计研究院',
            // }
        ],
        personPageFilter: {
          pageNo: 1,
          pageSize: 6,
          isPass:true,
        },
        menuData:[
          {
              key:7,
              name:'勘察单位'
            },
            {
              key:1,
              name:'设计单位'
            },
            {
              key:2,
              name:'施工单位'
            },
            {
              key:4,
              name:'监理单位'
            },
            {
              key:8,
              name:'咨询单位'
            },
            {
              key:9,
              name:'机械制造单位'
            },
            {
              key:5,
              name:'招标代理单位'
            },
            {
              key:6,
              name:'质量检测单位'
            },
            {
              key:3,
              name:'信息化单位'
            },
            {
              key:10,
              name:'其他单位'
            }
        ],
        dictDW:[]
      }
    },
    mounted() {
      this.dictList();
    },
    created(){
      this.get_unit_list();
      this.get_ryxx_list();

    },
    methods: {
      //字典获取
      async dictList(){
        await api.get_dict().then(ser => {
          this.dictDW = ser
          console.log(this.dictDW)
        })
      },
      dictText(val,text){
        let list = []
        var arr = (text || '').split(`,`)
        for(let item of arr){
          for(let index of this.dictDW){
            if(item === index.dictValue && val === index.dictType){
              list.push(index.dictLabel)
            }
          }
        }
        if(list.length !== 0){
          return list.toString()
        } else {
          return text
        }

      },

      onTabChange(key, type) {
        this[type] = key;
      },

      onMouseoverMenu(key){
         this.mouseoverSelect=key;
         this.onLeftMenuClick({key});

      },
      setSjIsShow(key){
        for(let i = 0; i <  this.sjShows.length; i++) {
          if( this.sjShows[i].key==key){

            this.sjShows[i].sjShow = true;
          }else{
            this.sjShows[i].sjShow = false;
          }
        }
      },
      onLeftMenuClick({ key }) {
         this.mouseoverSelect=key;
         this.setSjIsShow(key);
         if(key=='1'){//设计
          this.companyPageFilter.typeDw='16'
          this.get_unit_list();
        }else if(key=='2'){//施工
          this.companyPageFilter.typeDw='13'
          this.get_unit_list();
        }else if(key=='3'){//信息化
          this.companyPageFilter.typeDw='20'
          this.get_unit_list();
        }else if(key=='4'){//监理
          this.companyPageFilter.typeDw='14'
          this.get_unit_list();
        }else if(key=='5'){//招标代理
          this.companyPageFilter.typeDw='18'
          this.get_unit_list();
        }else if(key=='6'){//质量检测
          this.companyPageFilter.typeDw='19'
          this.get_unit_list();
        }else if(key=='7'){//勘察单位
          this.companyPageFilter.typeDw='15'
          this.get_unit_list();
        }else if(key=='8'){//咨询单位
          this.companyPageFilter.typeDw='42'
          this.get_unit_list();
        }else if(key=='9'){//机械制造单位
          this.companyPageFilter.typeDw='17'
          this.get_unit_list();
        }else if(key=='10'){//其他单位
          this.companyPageFilter.typeDw='21'
          this.get_unit_list();
        }

      },

      toWorkingUnit(){
        this.$router.push({
          name:"workingUnitPage",

        });
      },
      toWorkingPerson(){
         this.$router.push({
          name:"workingPersonPage",

        });
      },

      onUnitDetail(record, index){
         return {
            on: {
               click: () => {
                    this.$router.push({
                      name:"unitDetail",
                      query:{
                        type:'detail',
                        id:record.id,
                        company:record.name,
                        breadcrumbName:'从业单位'

                      }
                    });
               }
            }
        }


      },
      toPersonDetail(record){
        this.$router.push({
              name:"personDetail",
              query:{
                type:'detail',
                id:record.id,
                breadcrumbName:'从业人员'

             }
            });
      },
      get_unit_list() {
          api.get_unit_list(this.companyPageFilter).then(res => {
            this.companyData = res.rows;
          })
          .catch(err => {
          });
      },
      get_ryxx_list() {
          api.get_ryxx_list(this.personPageFilter).then(res => {
            this.personInfoData = res.rows;
          })
          .catch(err => {
          });
      },
    },
  };
</script>
<style lang="less">
.tabview3{
  width: 65%;
  position: absolute;
  /* z-index: 99999; */
  height: 280px;
  margin-top: 585px;
  left: 17.5%;
}

.cardDiv3{
  height: 555px;
  background: #fff;
  margin-top: 20px;
}
.person-list{
  width: 100%;
  margin-bottom: 28px;
  text-overflow: ellipsis;  /*超出内容用省略号*/
    overflow: hidden; /*内容超出后隐藏*/
    white-space: nowrap; /*文本不进行换行*/
}
.person-list:hover{
  color: #005AB5;
  cursor: pointer;
  font-weight: 600;
  .person-name,.person-position,.person-company{
    color: #005AB5;
  }
}
.person-name{
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.person-position{
  color: #666666;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  margin-left: 14px;
}
.person-company{
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-top: 3px;
}
.nav-div{
  width: 25%;
  float: left;
}
.nav-select-div{
  width: 75%;
  float: left;
}
.nav-item-text{
  color:#333333;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}

.nav-div > .ant-menu-dark, .nav-div > .ant-menu-dark .ant-menu-sub {
    color: rgba(255, 255, 255, 0.65);
    background: #fff;
}

//选中的效果
.nav-div > .ant-menu.ant-menu-dark .ant-menu-item-selected, .nav-div >.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
    //  width: 115px;
     background-color: #337BD7;
     border: 0px;
    // background-image: url(../../../assets/btn-blue.png);


}

//鼠标滑动经过的效果
.nav-div > .ant-menu-dark .ant-menu-item:hover, .nav-div > .ant-menu-dark .ant-menu-item-active, .nav-div > .ant-menu-dark .ant-menu-submenu-active, .nav-div > .ant-menu-dark .ant-menu-submenu-open, .nav-div > .ant-menu-dark .ant-menu-submenu-selected, .nav-div > .ant-menu-dark .ant-menu-submenu-title:hover {
  //  width: 115px;
   color: rgba(255, 255, 255, 0.65);
    background-color: #337BD7;
    // background-image: url(../../../assets/btn-blue.png);
    border: 0px;
}

//鼠标滑动经过的文字效果
.nav-div > .ant-menu.ant-menu-dark .ant-menu-item-active>.nav-item-text{
  color:#fff;
}

//选中的文字效果
.nav-div > .ant-menu.ant-menu-dark .ant-menu-item-selected >.nav-item-text{
  color:#fff;
}
// .nav-div > .ant-menu.ant-menu-dark .ant-menu-item-selected >.nav-item-text:after{
//   color:#ccc;
// }

// .ant-menu-vertical .ant-menu-item:not(:last-child), .ant-menu-vertical-left .ant-menu-item:not(:last-child), .ant-menu-vertical-right .ant-menu-item:not(:last-child), .ant-menu-inline .ant-menu-item:not(:last-child) {
//     margin-bottom: 1px;
// }

//未选中的效果
.nav-div > .ant-menu-vertical .ant-menu-item,
.nav-div > .ant-menu-vertical-left .ant-menu-item,
.nav-div > .ant-menu-vertical-right .ant-menu-item,
.nav-div > .ant-menu-inline .ant-menu-item,
.nav-div > .ant-menu-vertical .ant-menu-submenu-title,
.nav-div > .ant-menu-vertical-left .ant-menu-submenu-title,
.nav-div > .ant-menu-vertical-right .ant-menu-submenu-title,
.nav-div > .ant-menu-inline .ant-menu-submenu-title {
    width: 180px;
    height: 53px;
    margin-top: 0px;
    margin-bottom: -1px;
    padding: 9px 16px;
    overflow: hidden;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 35px;
    text-overflow: ellipsis;
    text-align: center;
    border: 0.1px solid #CCCCCC;
    background: #F5F5F5;
}

.triangle-right{
  width: 0;
  height: 0;
  border-left: 10px solid #337BD7;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  float: left;
  margin-left: -18px;
  margin-top: 10px;
}
.triangle-margin-top1{
 margin-top: 45px;
}
.triangle-margin-top2{
 margin-top: 80px;
}
.triangle-margin-top3{
 margin-top: 115px;
}
.triangle-margin-top4{
 margin-top: 150px;
}
.triangle-margin-top5{
 margin-top: 185px;
}

// 长方形
.rectangle{
width:106px;
height:35px;
line-height: 35px;
//border: 1px #ccc solid;
background-color:#347CD8;
position:relative;
}

.rectangle:before, .rectangle:after{
width:0px;
height:0px;
border:transparent solid;
position:absolute;
left:100%;
content:""
}

.rectangle:before{
border-width:10px;
border-left-color: #347CD8;
top:6px;
}
.rectangle:after{
border-width:8px;
border-left-color: #347CD8;
top:8px;
}
</style>
